<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>设置banner</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  <style>
    .layui-table-tool {
      min-height: unset;
    }
    .layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
      height: 25px;
      line-height: 25px;
    }
    .layui-upload-img {
      width: 150px;
      height: 75px;
      padding: 5px;
    }
  </style>
<body>


<div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">


  <div class="layui-form-item">
    <label class="layui-form-label">代理商</label>
    <div class="layui-input-block" id="quick_list">

    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">人群类型</label>
    <div class="layui-input-block">
      <input type="checkbox" name="type[]" value="2" lay-skin="primary"  title="屏蔽地区" checked>
      <input type="checkbox" name="type[]" value="1" lay-skin="primary"  title="广告线上">
    </div>
  </div>
  <script type="text/html" id="table-useradmin-admin">
    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete" ></i></a>
  </script>
  <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
      <li class="layui-this">首页</li>
      <li>男频首页</li>
      <li>女频首页</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">

        <div class="layui-form-item">
          <div class="layui-input-block">

            <script type="text/html" id="addNovel1">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-xs" lay-event="add1">添加</button>
              </div>
            </script>

            <table lay-filter="parse-table-demo1" id="parse-table-demo1">
              <thead>
              <tr>
                <th lay-data="{field:'id', width:80}">小说ID</th>
                <th lay-data="{field:'title', minWidth:120}">小说名</th>
                <th lay-data="{field:'scale', width:80,align: 'center'}">评级</th>
                <th lay-data="{field:'freq_class',width: 120,align: 'center'}">频道 · 分类</th>
                <th lay-data="{field:'in_shelf',width:80,align: 'center'}">是否上架</th>
                <th lay-data="{toolbar: '#table-useradmin-admin', width:80,align: 'center'}">操作</th>
              </tr>
              </thead>
              <tbody id="novelTable1">
              </tbody>
            </table>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-block">
            <div class="layui-upload">
              <button type="button" class="layui-btn layui-btn-sm" id="test1">多图片上传</button>
              <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;overflow: hidden;">
                预览图：
                <div class="layui-upload-list" id="demo1"></div>
              </blockquote>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-tab-item">
        <div class="layui-form-item">
          <div class="layui-input-block">
            <script type="text/html" id="addNovel2">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-xs" lay-event="add2">添加</button>
              </div>
            </script>

            <table lay-filter="parse-table-demo2" id="parse-table-demo2">
              <thead>
              <tr>
                <th lay-data="{field:'id', width:80}">小说ID</th>
                <th lay-data="{field:'title', minWidth:120}">小说名</th>
                <th lay-data="{field:'scale', width:80,align: 'center'}">评级</th>
                <th lay-data="{field:'freq_class',width: 120,align: 'center'}">频道 · 分类</th>
                <th lay-data="{field:'in_shelf',width:80,align: 'center'}">是否上架</th>
                <th lay-data="{toolbar: '#table-useradmin-admin', width:80,align: 'center'}">操作</th>
              </tr>
              </thead>
              <tbody id="novelTable2">

              </tbody>
            </table>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <div class="layui-upload">
              <button type="button" class="layui-btn layui-btn-sm" id="test2">多图片上传</button>
              <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;overflow: hidden;">
                预览图：
                <div class="layui-upload-list" id="demo2"></div>
              </blockquote>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-tab-item">
        <div class="layui-form-item">
          <div class="layui-input-block">
            <script type="text/html" id="addNovel3">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-xs" lay-event="add3">添加</button>
              </div>
            </script>

            <table lay-filter="parse-table-demo3" id="parse-table-demo3">
              <thead>
              <tr>
                <th lay-data="{field:'id', width:80}">小说ID</th>
                <th lay-data="{field:'title', minWidth:120}">小说名</th>
                <th lay-data="{field:'scale', width:80,align: 'center'}">评级</th>
                <th lay-data="{field:'freq_class',width: 120,align: 'center'}">频道 · 分类</th>
                <th lay-data="{field:'in_shelf',width:80,align: 'center'}">是否上架</th>
                <th lay-data="{toolbar: '#table-useradmin-admin', width:80,align: 'center'}">操作</th>
              </tr>
              </thead>
              <tbody id="novelTable3">

              </tbody>
            </table>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <div class="layui-upload">
              <button type="button" class="layui-btn layui-btn-sm" id="test3">多图片上传</button>
              <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;overflow: hidden;">
                预览图：
                <div class="layui-upload-list" id="demo3"></div>
              </blockquote>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>




  <div class="layui-form-item layui-hide">
    <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
  </div>
</div>


<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index',
    xmSelect: 'xmSelect/xm-select'
  }).use(['index', 'form','upload','table','xmSelect'], function(){
    var $ = layui.$
            ,admin = layui.admin
            ,form = layui.form
            ,upload = layui.upload
            ,table = layui.table
            ,xmSelect = layui.xmSelect;
    var element = layui.element;


    var jdb_xm = xmSelect.render({
      el: '#quick_list',
      name:'agent_id',
      filterable: true,
      data: {$agent_list|raw}
  });

    element.on('tab(docDemoTabBrief)', function(){
      table.resize('parse-table-demo1');
      table.resize('parse-table-demo2');
      table.resize('parse-table-demo3');
    });

    //多图片上传
    upload.render({
      elem: '#test1'
      ,accept:'images'
      ,acceptMime: 'image/jpeg, image/png'
      ,url: '/tool/uploadPic?dirName=banner'
      ,multiple: true
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          // $('#demo1').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')

        });
      }
      ,done: function(res){
        //上传完毕
        $("#demo1").append("" +
                "<div class='lookpicbox_1' style='float: left;text-align: center;'><input type='hidden' name='pic1[]' value='"+res.data.filePath+"' />" +
                  "<p>" +
                  "<a href='"+res.data.picUrl+"' target='_blank'><img class='layui-upload-img' src='"+res.data.picUrl+"'></a>" +
                  "</p>" +
                  "<div class='layui-btn-group'>" +
                    "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs'  onClick='dopicpre(layui.$(this),1);'>"+
                    "<i class='layui-icon'>&#xe603;</i>" +
                    "</button>" +
                    "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs' onClick='dopicdel(layui.$(this),1);'>"+
                    "<i class='layui-icon'>&#xe640;</i>" +
                    "</button>" +
                    "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs' onClick='dopicnext(layui.$(this),1);'>"+
                    "<i class='layui-icon'>&#xe602;</i>" +
                    "</button>"+
                  "</div>"+
                "</div>")

      }
    });


    upload.render({
      elem: '#test2'
      ,accept:'images'
      ,acceptMime: 'image/jpeg, image/png'
      ,url: '/tool/uploadPic?dirName=banner'
      ,multiple: true
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          // $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
        });
      }
      ,done: function(res){
        //上传完毕
        $("#demo2").append("" +
                "<div class='lookpicbox_2' style='float: left;text-align: center;'><input type='hidden' name='pic2[]' value='"+res.data.filePath+"' />" +
                "<p>" +
                "<a href='"+res.data.picUrl+"' target='_blank'><img class='layui-upload-img' src='"+res.data.picUrl+"'></a>" +
                "</p>" +
                "<div class='layui-btn-group'>" +
                "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs'  onClick='dopicpre(layui.$(this),2);'>"+
                "<i class='layui-icon'>&#xe603;</i>" +
                "</button>" +
                "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs' onClick='dopicdel(layui.$(this),2);'>"+
                "<i class='layui-icon'>&#xe640;</i>" +
                "</button>" +
                "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs' onClick='dopicnext(layui.$(this),2);'>"+
                "<i class='layui-icon'>&#xe602;</i>" +
                "</button>"+
                "</div>"+
                "</div>")
      }
    });

    upload.render({
      elem: '#test3'
      ,accept:'images'
      ,acceptMime: 'image/jpeg, image/png'
      ,url: '/tool/uploadPic?dirName=banner'
      ,multiple: true
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          // $('#demo3').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
        });
      }
      ,done: function(res){
        //上传完毕
        $("#demo3").append("" +
                "<div class='lookpicbox_3' style='float: left;text-align: center;'><input type='hidden' name='pic3[]' value='"+res.data.filePath+"' />" +
                "<p>" +
                "<a href='"+res.data.picUrl+"' target='_blank'><img class='layui-upload-img' src='"+res.data.picUrl+"'></a>" +
                "</p>" +
                "<div class='layui-btn-group'>" +
                "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs'  onClick='dopicpre(layui.$(this),3);'>"+
                "<i class='layui-icon'>&#xe603;</i>" +
                "</button>" +
                "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs' onClick='dopicdel(layui.$(this),3);'>"+
                "<i class='layui-icon'>&#xe640;</i>" +
                "</button>" +
                "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs' onClick='dopicnext(layui.$(this),3);'>"+
                "<i class='layui-icon'>&#xe602;</i>" +
                "</button>"+
                "</div>"+
                "</div>")
      }
    });

    upload.render({
      elem: '#test4'
      ,accept:'images'
      ,acceptMime: 'image/jpeg, image/png'
      ,url: '/tool/uploadPic?dirName=banner'
      ,multiple: true
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          // $('#demo4').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
        });
      }
      ,done: function(res){
        //上传完毕
        $("#demo4").append("" +
                "<div class='lookpicbox_4' style='float: left;text-align: center;'><input type='hidden' name='pic4[]' value='"+res.data.filePath+"' />" +
                "<p>" +
                "<a href='"+res.data.picUrl+"' target='_blank'><img class='layui-upload-img' src='"+res.data.picUrl+"'></a>" +
                "</p>" +
                "<div class='layui-btn-group'>" +
                "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs'  onClick='dopicpre(layui.$(this),4);'>"+
                "<i class='layui-icon'>&#xe603;</i>" +
                "</button>" +
                "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs' onClick='dopicdel(layui.$(this),4);'>"+
                "<i class='layui-icon'>&#xe640;</i>" +
                "</button>" +
                "<button type='button' class='layui-btn layui-btn-primary layui-btn-xs' onClick='dopicnext(layui.$(this),4);'>"+
                "<i class='layui-icon'>&#xe602;</i>" +
                "</button>"+
                "</div>"+
                "</div>")
      }
    });

    table.init('parse-table-demo1', { //转化静态表格
      //height: 'full-500'
      toolbar: '#addNovel1' //开启头部工具栏，并为其绑定左侧模板
      , defaultToolbar: false
      , size: 'sm' //小尺寸的表格
    });

    table.init('parse-table-demo2', { //转化静态表格
      //height: 'full-500'
      toolbar: '#addNovel2' //开启头部工具栏，并为其绑定左侧模板
      , defaultToolbar: false
      , size: 'sm' //小尺寸的表格
    });

    table.init('parse-table-demo3', { //转化静态表格
      //height: 'full-500'
      toolbar: '#addNovel3' //开启头部工具栏，并为其绑定左侧模板
      , defaultToolbar: false
      , size: 'sm' //小尺寸的表格
    });

    //监听行工具事件
    table.on('tool(parse-table-demo1)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        document.getElementById("1_novel_" + data.id).remove();
        obj.del();
      }
    });
    table.on('tool(parse-table-demo2)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        document.getElementById("2_novel_" + data.id).remove();
        obj.del();
      }
    });
    table.on('tool(parse-table-demo3)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        document.getElementById("3_novel_" + data.id).remove();
        obj.del();
      }
    });

    table.on('toolbar(parse-table-demo1)', function (obj) {
      switch (obj.event) {
        case 'add1':
          add(1);
          break;
      }
    });
    table.on('toolbar(parse-table-demo2)', function (obj) {
      switch (obj.event) {
        case 'add2':
          add(2);
          break;
      }
    });
    table.on('toolbar(parse-table-demo3)', function (obj) {
      switch (obj.event) {
        case 'add3':
          add(3);
          break;
      }
    });

    function add(mark) {
      $("#nIds").val('');
      layer.open({
        type: 1,
        title:'添加小说',
        offset: '15px',
        area: ['50%', '300px'],
        skin: 'layui-layer-demo', //样式类名
        closeBtn: 0, //不显示关闭按钮
        anim: 2,
        shadeClose: true, //开启遮罩关闭
        content: $('.hot-show'),
        btn: ['确定', '取消']
        ,yes: function(index, layero){
          var nIds = $("#nIds").val();
          if (nIds.length > 0) {
            let replacedText = nIds.replace(/，/g, ',');
            $("#nIds").val(replacedText);
            if (!isCommaSeparatedIds(replacedText)){
              layer.msg('检查格式，请输入正确格式的小说id');
              return false;
            }
            var nidArr = $('input[name="table_novel_id' + mark + '[]"]').map(function () {
              return this.value;
            }).get();
            var newNidArr = replacedText.split(",");
            var saveArr = newNidArr.concat(nidArr);//c=[1,2,3,4,5,6];
            admin.req({
              url: '/novel/renderNovels'
              , type: "POST"
              , data: {'nidArr': saveArr,'type':'plBanner'}
              , done: function (res) {
                renderNovel(res.data,mark);
                layer.close(index);
              }, not_finish: function (res) {
                layer.msg(res.msg);
              }
            });
          }else {
            layer.msg('请输入小说id');
          }
        }
      });
    }


    function isCommaSeparatedIds(str) {
      var regex = /^\d+(,\d+)*$/;
      return regex.test(str);
    }

    /**
     * 渲染小说
     * @param novels
     */
    function renderNovel(novels, mark) {
      $("#novelTable" + mark).empty();

      $.each(novels, function (index, data) {
        var row = $('<tr>'); // 创建一个 tr 行元素
        var idCell = $('<td>').text(data.id); // 使用键 id 的值创建一个 td 元素
        var nameCell = $('<td>').text(data.title); // 使用键 name 的值创建一个 td 元素
        var scaleCell = $('<td>').text(data.scale + '级'); // 使用键 age 的值创建一个 td 元素
        var freqCell = $('<td>').text(data.freq.name + ' . ' + data.novel_class.name); // 使用键 age 的值创建一个 td 元素

        if (data.in_shelf == 1) {
          var shelfCell = $('<td>').text('上架');
        } else if(data.in_shelf == 2) {
          var shelfCell = $('<td>').text('下架');
        }else if(data.in_shelf == 0) {
          var shelfCell = $('<td>').text('绝对下架');
        }

        row.append(idCell, nameCell, scaleCell, freqCell,shelfCell); // 将 td 单元格添加到 tr 行中
        $('#novelTable' + mark).append(row);

        var row = $('<input type="hidden" id="' + mark + '_novel_' + data.id + '" name="table_novel_id' + mark + '[]" value="' + data.id + '">');
        $('#novelTable' + mark).append(row);
      });


      table.init('parse-table-demo' + mark, { //转化静态表格
        toolbar: '#addNovel' + mark //开启头部工具栏，并为其绑定左侧模板
        , defaultToolbar: false
        , size: 'sm' //小尺寸的表格
      });
    }


  });
</script>
<script>
  //处理多图前移
  function dopicpre($this,mark){
    var curobj = $this.closest('.lookpicbox_'+mark);
    var preobj = curobj.prev();
    if(preobj.length == 0){
      layer.msg("已经第一行了");
      return;
    }else{
      preobj.before(curobj);
      //sortNumber();//重新排序
    }
  }

  //处理多图后移
  function dopicnext($this,mark){
    var curobj = $this.closest('.lookpicbox_'+mark);
    var nextobj = curobj.next();
    if(nextobj.length == 0){
      layer.msg("已经最后一行了");
      return;
    }else{
      nextobj.after(curobj);
      //sortNumber();//重新排序
    }
  }
  //处理多图删除
  function dopicdel($this,mark){
    var curobj = $this.closest('.lookpicbox_'+mark);
    curobj.remove();
  }
</script>
<div class="hot-show" style="display: none;">

  <form class="layui-form layui-form-pane" style="padding: 10px;" action="">
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">小说ID</label>
      <div class="layui-input-block">
        <textarea id="nIds" placeholder="请输入id，并用半角逗号分隔，如：1,2,3,4,5,6" class="layui-textarea"></textarea>
      </div>
    </div>
  </form>

</div>
</body>
</html>
